<!-- author: xuett -->
<!-- date: 2023-03-10 11:02:46 -->
<!-- description: 大屏缩放 -->
<template>
  <div ref="scaleRef" class="scale-box" :style="{ width: sWidth + 'px', height: sHeight + 'px', transform: `translate(-50%, -50%) scale(${scale}) ` }">
    <slot></slot>
  </div>
</template>

<script setup>
const $props = defineProps({
  width: {
    type: [String, Number],
    default: 1920
  },
  height: {
    type: [String, Number],
    default: 1080
  }
});

const scaleRef = ref(null);
const state = reactive({
  scale: 1,
  sWidth: 0,
  sHeight: 0
});
const { scale, sWidth, sHeight } = toRefs(state);

onMounted(() => {
  init();
});

const init = () => {
  state.sWidth = $props.width;
  state.sHeight = $props.height;
  setScale();
  //监听窗口尺寸变化
  window.addEventListener("resize", setScale);
};
//计算scale
const setScale = () => {
  const parentDom = scaleRef.value.parentElement;
  let ww = parentDom.clientWidth / $props.width;
  let wh = parentDom.clientHeight / $props.height;
  state.scale = ww < wh ? ww : wh;
};
</script>

<style scoped lang="scss">
.scale-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>
